<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="dist/css/index.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
</head>

<body>
    <!-- top -->
    <div class="top">
        <h1>
            <img src="scr/images/logo_03.jpg" alt="">
        </h1>
        <ul class="top_ul">
            <li><a class="before">7T系列<span class="iconfont icon-new1"></span>
                    <div class="show">
                        <div class="show-in">
                            <p>
                                <span class="iconfont icon-dianhua1"></span>
                                <i>OnePuls7T</i>
                            </p>
                            <p>
                                <span class="iconfont icon-dianhua1"></span>
                                <i>OnePuls7T</i>
                            </p>
                            <p>
                                <span class="iconfont icon-dianhua1"></span>
                                <i>OnePuls7T</i>
                            </p>
                        </div>
                    </div>
                </a></li>
            <li><a class="before">7系列
                <div class="show">
                    <div class="show-in">
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>OnePuls7T</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>OnePuls7T</i>
                        </p>
                    </div>
                </div>
            </a class="before"></li>
            <li><a class="before">商城
                <div class="show">
                    <div class="show-in">
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>&nbsp;&nbsp;耳机&nbsp;&nbsp;</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>&nbsp;&nbsp;手机&nbsp;&nbsp;</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>&nbsp;&nbsp;壳/膜&nbsp;&nbsp;</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>&nbsp;&nbsp;适配器/数据线&nbsp;&nbsp;</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>&nbsp;&nbsp;套装&nbsp;&nbsp;</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span>
                            <i>&nbsp;&nbsp;生活馆&nbsp;&nbsp;</i>
                        </p>
                    </div>
                </div>
            </a></li>
            <li><a>品牌</a></li>
            <li><a>服务</a></li>
            <li><a>论坛</a></li>
            <li><a>零售店</a></li>
        </ul>
        <div class="top_r">
            <a class='topr-login iconfont icon-yonghu2'>

            </a>
            <div class="topr-show">
                <p>订单</p>
                <p>账户</p>
                <p>推荐有礼</p>
                <p class="user"><a href="scr/html/login.html">登录</a></p>
            </div>

            <a href="scr/html/myCart.html" class="iconfont icon-Newuserzone"></a>
                <!-- 小购物车 -->
                <div class="small-cart">
                    <div class="s-c-t">
                        <div class="c-t-t">
                            <p>已选择</p><em><span>2</span>件商品</em>
                        </div>
                        <ul class="c-t-b">
                            <li>
                                <div class="t-b-l">
                                    <img src="" alt="">
                                </div>
                                <div class="t-b-c">
                                    <h3>OnePlus6T 个性保护壳芳纶纤维</h3>
                                    <h4>￥129.22</h4>
                                </div>
                                <div class="t-b-r">
                                    <p>x2</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="s-c-b">
                        <p>总价<span>￥128.10</span></p>
                        <em>支持免邮</em>
                        <div class="btn">
                            <a href="scr/html/myCart.html" class="btn1">去购物车</a>
                            <a class="btn2">去结算</a>
                        </div>
                    </div>
                </div>
            
            
            <a class="iconfont icon-sousuo3"></a>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
        <!-- 第一个轮播图 -->
        <div class="img">
            <div class="img_l">
                <h2>G.E.M.Hasee</h2>
                <p> Hasee u4 7T</p>
                <h3>￥2999起</h3>
                <p>立即购买></p>
            </div>
            <div class="img_r">
                <img src="scr/images/ban1.png" alt="">
            </div>
        </div>
        <!-- 第二个 -->
        <div class="img">
            <div class="img_l">
                <h2>OnePlus 7T Pro</h2>
                <p>全系90Hz,流畅新标杆</p>
                <h3>￥3289起</h3>
                <p>立即购买></p>
            </div>
            <div class="img_r">
                <img src="scr/images/ben2.png" alt="">
            </div>
        </div>
        <p class="nextImg iconfont icon-you"></p>
        <p class="prevImg iconfont icon-icon-arrow-left2"></p>
    </div>
    <!-- nav -->
    <div class="nav">
        <ul class="warpUl">
            <li class="li1">
                <a href="javascript:;">
                    精选商品&nbsp;&nbsp;<span class="iconfont icon-icon-arrow-bottom2"></span>
                </a>
                <ul class="neiUl">
                    <li><a href="javascript:;">精选商品</a></li>
                    <li><a href="javascript:;">手机</a></li>
                    <li><a href="javascript:;">耳机</a></li>
                    <li><a href="javascript:;">壳/膜</a></li>
                    <li><a href="javascript:;">适配器/数据线</a></li>
                    <li><a href="javascript:;">生活馆</a></li>
                    <li><a href="javascript:;">套装</a></li>
                </ul>
            </li>

            <li class="li1">
                <a href="javascript:;">
                    全部机型&nbsp;&nbsp;<span class="iconfont icon-icon-arrow-bottom2"></span>
                </a>
                <ul class="neiUl">
                    <li><a href="javascript:;">全部机型</a></li>
                    <li><a href="javascript:;">OnePlus7T</a></li>
                    <li><a href="javascript:;">OnePlus</a></li>
                    <li><a href="javascript:;">OnePlus6T</a></li>
                    <li><a href="javascript:;">适配器/数据线</a></li>
                    <li><a href="javascript:;">OnePlus</a></li>
                    <li><a href="javascript:;">套装</a></li>
                </ul>
            </li>

            <li class="li1">
                <a href="javascript:;">
                    默认排序&nbsp;&nbsp;<span class="iconfont icon-icon-arrow-bottom2"></span>
                </a>
                <ul class="neiUl">
                    <li><a href="javascript:;">默认排序</a></li>
                    <li><a href="javascript:;">价格从高到低</a></li>
                    <li><a href="javascript:;">价格从低到高</a></li>
                    <li><a href="javascript:;">最新添加</a></li>

                </ul>
            </li>
        </ul>
    </div>

    <!-- 商品列表 -->
    <div class="PlistBox">
        <dl class="plist">
            <dt>
                <img src="scr/images/list1.png" alt="">
            </dt>
            <dd>
                <h4>OnePlus 6T 3D钢化玻璃保护膜</h4>
                <p><del>￥129.00</del>￥19.35</p>
            </dd>
        </dl>
        <dl class="plist">
            <dt>
                <img src="scr/images/list1.png" alt="">
            </dt>
            <dd>
                <h4>OnePlus 6T 3D钢化玻璃保护膜</h4>
                <p><del>￥129.00</del>￥19.35</p>
            </dd>
        </dl>
        <dl class="plist">
            <dt>
                <img src="scr/images/list1.png" alt="">
            </dt>
            <dd>
                <h4>OnePlus 6T 3D钢化玻璃保护膜</h4>
                <p><del>￥129.00</del>￥19.35</p>
            </dd>
        </dl>
        <dl class="plist">
            <dt>
                <img src="scr/images/list1.png" alt="">
            </dt>
            <dd>
                <h4>OnePlus 6T 3D钢化玻璃保护膜</h4>
                <p><del>￥129.00</del>￥19.35</p>
            </dd>
        </dl>

        <!-- sdjisfh第二种 -->
        


    </div>

    <!-- foot1 -->
    <div class="foot1">
        <dl>
            <dt><a href="javascript:;" class="iconfont icon-xin" style="font-size:50px;"></a></dt>
            <dd><a href="javascript:;">七天无理由退货</a></dd>
        </dl>
        <dl>
            <dt><a href="javascript:;" class="iconfont icon-xin" style="font-size:50px;"></a></dt>
            <dd><a href="javascript:;">15天退货保障</a></dd>
        </dl>
        <dl>
            <dt><a href="javascript:;" class="iconfont icon-xin" style="font-size:50px;"></a></dt>
            <dd><a href="javascript:;">30天换货保障</a></dd>
        </dl>
        <dl>
            <dt><a href="javascript:;" class="iconfont icon-xin" style="font-size:50px;"></a></dt>
            <dd><a href="javascript:;">99元全场包邮</a></dd>
        </dl>
    </div>
    <!-- foot2 -->
    <div class="foot2">
        <div class="top">
            <p class="title"><a href="#">首页</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<em>商城</em></p>
            <div class="ul">
                <ul>
                    <li class="liOne">一加产品</li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T </a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                </ul>
                <ul>
                    <li class="liOne">热门活动</li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T </a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                </ul>
                <ul>
                    <li class="liOne">关于一加</li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T </a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                </ul>
                <ul>
                    <li class="liOne">服务支持</li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T </a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                    <li><a href="#">OnePlus 7T</a></li>
                    <li><a href="#">OnePlus 7T Pro</a></li>
                </ul>
                <div class="foot_right">
                    <p class="iconfont icon-dianhua1">400-888-1111</p>
                    <a href="#">在线客服</a>
                    <em>周一至周日9:00 - 22:00</em>
                </div>
            </div>

        </div>
        <div class="bottom">
            <div class="china">
                <h2><span class="iconfont icon-dianhua1"></span>&nbsp;中国大陆（简体中文/CNY）</h2>
                <p>更多选购方式，请查找零售店或- -加微信官方商城</p>
            </div>
        </div>
    </div>

    <script src="scr/js/jquery-1.11.3.min.js"></script>
    <script src="scr/js/index.js"></script>
    <script>
        $('.icon-Newuserzone').hover(function(){
            $('.small-cart').css({display:'block'})
        },function(){
            $('.small-cart').css({display:'none'})
        })
        $('.small-cart').hover(function(){
            $('.small-cart').css({display:'block'})
        },function(){
            $('.small-cart').css({display:'none'})
        })

        ////////
        $('.topr-login').hover(function () {
            $('.top_r .topr-show').css({
                display: 'block', zIndex: '9999', background: '#fff'
            })
        }, function () {
            $('.top_r .topr-show').css({
                display: 'none'
            })
        })
        $('.top_r .topr-show').hover(function () {
            $('.top_r .topr-show').css({
                display: 'block', zIndex: 9999
            })
        }, function () {
            $('.top_r .topr-show').css({
                display: 'none'
            })
        })
        //顶部用户头像显示用户名------------
        let user = localStorage.getItem('username')
        let uid = localStorage.getItem('uid')
        if (user) {
            $('.user').html("用户：" + user + '&nbsp;&nbsp;<a class="userOut">退出</a>')
            $('.userOut').click(function () {
                window.location.reload()
                localStorage.clear()
                console.log('这是一个bug？？');
            })
      
            //---------------------展示商品列表----------------

            $.ajax({
                url: 'http://jx.xuzhixiang.top/ap/api/productlist.php',
                type: "get",
                data: {
                    uid
                }
            }).then(res => {
                let arr = res.data;
                let html = '';
                for (let i = 0; i < arr.length; i++) {
                    html += `
                <dl class="plist" data-pid="${arr[i].pid}">
                <dt>
                    <img src="scr/images/${arr[i].pimg}" alt="">
                </dt>
                <dd>
                    <h4>${arr[i].pname}</h4>
                    <p><del>￥129.00</del>${arr[i].pprice}</p>
                </dd>
                 </dl>
                `
                }
                $('.PlistBox').html(html)
                //-----------获取到所有商品添加点击跳转详情页面
                $('.plist').on('click', function () {
                    let pid = $(this).attr('data-pid')
                    open('scr/html/item.html?pid='+pid)
                })
            })
        }else{
            $('.user').html('<a href="scr/html/login.html">登录</a>')
        }
    </script>

</body>

</html>